<script setup>
  import { nextTick, onMounted, onUnmounted, ref } from 'vue'
  import { initWaterFall } from '@/utils/waterfall'
  import { getTagList, deleteTag } from '@/api/tag'
  import { getArticles, deleteArticle } from '@/api/article'
  import { getArticleByCommon, getTagListByCommon } from '@/api/common'
  import { useUserStore } from '@/stores'
  import { useRouter } from 'vue-router'
  const userStore = useUserStore()
  const router = useRouter()
  onMounted(() => {
    getData()
  })
  onUnmounted(() => {
    window.removeEventListener('resize', debounce)
  })
  const timer = ref(null)
  const debounce = () => {
    if (timer.value) {
      clearTimeout(timer.value)
    }
    timer.value = setTimeout(() => {
      initWaterFall(articleList.value)
    }, 50)
  }
  const queryData = ref({
    pageNum: 1,
    pageSize: 30,
    tagId: '',
    content: ''
  })
  const tagList = ref([])
  const articleList = ref([])
  const changeTagId = id => {
    queryData.value.tagId = id
    getData()
  }
  const handleDelete = ({ id, type }) => {
    if (type == 0) {
      deleteArticle(id).then(() => {
        ElMessage.success('删除成功')
        getArticles(queryData.value).then(res => {
          articleList.value = res.data.records
          nextTick(() => {
            initWaterFall(articleList.value)
          })
        })
      })
    } else {
      deleteTag(id).then(() => {
        ElMessage.success('删除成功')
        getTagList().then(res => {
          tagList.value = res.data
        })
      })
    }
  }
  const menuData = ref({
    x: 0,
    y: 0,
    show: false,
    id: null,
    type: 0
  })
  const handleContextmenu = (e, type, item) => {
    if (!userStore.token) return
    e.preventDefault()
    menuData.value = {
      x: e.clientX,
      y: e.clientY,
      show: true,
      item,
      type
    }
  }
  const content = ref(null)
  const handleOpen = id => {
    content.value.open(id)
  }
  const gotoPost = () => {
    router.push({ path: '/post', query: { tagId: queryData.value.tagId } })
  }
  const getData = () => {
    window.removeEventListener('resize', debounce)
    if (userStore.token) {
      getArticles(queryData.value)
        .then(res => {
          articleList.value = res.data.records
          getTagList().then(res => {
            tagList.value = res.data
          })
          nextTick(() => {
            initWaterFall(articleList.value)
          })
        })
        .catch(() => {
          getArticleByCommon(queryData.value).then(res => {
            articleList.value = res.data.records
            getTagListByCommon().then(res => {
              tagList.value = res.data
            })
            nextTick(() => {
              initWaterFall(articleList.value)
            })
          })
        })
    } else {
      getArticleByCommon(queryData.value).then(res => {
        articleList.value = res.data.records
        getTagListByCommon().then(res => {
          tagList.value = res.data
        })
        nextTick(() => {
          initWaterFall(articleList.value)
        })
      })
    }
    window.addEventListener('resize', debounce)
  }
  const handleChange = () => {
    if (queryData.value.content == '') {
      getData()
    }
  }
</script>

<template>
  <div class="main-content">
    <div class="input-box">
      <input
        type="text"
        class="search-input"
        placeholder="搜索文章"
        v-model="queryData.content"
        @change="handleChange"
        @keydown.enter="getData"
      />
      <div
        class="input-button flex-between"
        @click="getData()"
      >
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-search"></use>
        </svg>
      </div>
    </div>
    <div class="page">
      <div class="tag-list flex wrap">
        <div
          class="tag-item"
          @click="changeTagId('')"
          :class="{ active: queryData.tagId == '' }"
        >
          全部
        </div>
        <div
          class="tag-item"
          :class="{ active: queryData.tagId == item.id }"
          @click="changeTagId(item.id)"
          v-for="item in tagList"
          :key="item.id"
          @contextmenu="handleContextmenu($event, 1, item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="waterfall" v-if="articleList.length != 0">
        <section
          class="note-item"
          v-for="item in articleList"
          :key="item.id"
          @click="handleOpen(item.id)"
          @contextmenu="handleContextmenu($event, 0, item)"
        >
          <div
            class="no-img"
            v-if="item.coverUrl == null || item.coverUrl == ''"
          >
            {{ item.tag }}
          </div>
          <img class="cover" :src="item.coverUrl" alt="" v-else />
          <div class="footer">
            <div class="title text-overflow-2">{{ item.title }}</div>
            <div class="info flex-between">
              <div class="flex-between">
                <img class="avatar" src="/src/assets/avatar.png" />
                <span class="text-overflow">Handsomedog</span>
              </div>
              <!-- prettier-ignore -->
              <!-- <span style="flex-shrink: 0; display: flex">
                <svg class="icon flex" aria-hidden="true"><use xlink:href="#icon-liulan"></use></svg>
                <span style="margin-left: 5px">{{ item.view }}</span>
              </span> -->
            </div>
          </div>
        </section>
      </div>
      <div style="margin-top: 100px" v-else>
        <el-empty description="暂无帖子发布">
          <el-button type="primary" @click="gotoPost()" v-if="userStore.token"
            >去发帖</el-button
          >
        </el-empty>
      </div>
    </div>
  </div>
  <Content ref="content"></Content>
  <ContextMenu
    :menuData="menuData"
    @action="handleDelete"
    @flash="getData"
  ></ContextMenu>
</template>

<style lang="scss" scoped>
  .main-content {
    user-select: none;
    width: 100%;
    min-height: 100dvh;

    .input-box {
      width: 500px;
      height: 40px;
      position: fixed;
      left: 50%;
      transform: translate(-50%);
      background: var(--color-active-background);
      border-radius: 999px;
      top: 18px;
      z-index: 11;

      .search-input {
        padding: 0 84px 0 16px;
        width: 100%;
        height: 100%;
        font-size: 16px;
        line-height: 120%;
        color: #333;
        caret-color: #ff2442;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 999px;
      }

      .input-button {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        width: 35px;
        height: 100%;

        .icon {
          color: var(--color-secondary-label);
          width: 20px;
          height: 20px;
        }
      }
    }

    .tag-list {
      font-size: 16px;
      color: var(--color-secondary-label);
      width: 100%;
      position: fixed;
      z-index: 10;
      background-color: var(--color-background);
      white-space: nowrap;

      .tag-item {
        height: 40px;
        line-height: 40px;
        padding: 0 16px;
        cursor: pointer;
        user-select: none;
        border-radius: 999px;
        color: var(--color-primary-label);
        transition: background-color 0.5s;
        &.active {
          font-weight: 600;
          background-color: var(--color-active-background);
        }

        &:hover {
          background-color: var(--color-active-background);
        }
      }
    }

    .waterfall {
      position: relative;
      margin: 50px auto;

      .note-item {
        cursor: pointer;
        position: absolute;
        left: 0;
        top: 0;

        .cover,
        .no-img {
          display: flex;
          width: 100%;
          border-radius: 16px;
        }

        .no-img {
          font-weight: bold;
          background: var(--color-active-background);
          color: var(--color-primary-label);
          font-size: 30px;
          writing-mode: vertical-lr;
          justify-content: center;
          align-items: center;
          padding: 20px;
          &:hover {
            font-size: 35px;
          }
          transition: font-size 0.5s;
        }

        .footer {
          padding: 12px;
          color: var(--color-secondary-label);
          font-size: 12px;
          transition: color 1s;

          .title {
            user-select: text;
            margin-bottom: 8px;
            font-weight: 500;
            font-size: 14px;
            line-height: 140%;
            color: var(--color-primary-label);
          }

          .info {
            .avatar {
              margin-right: 6px;
              width: 20px;
              height: 20px;
              border-radius: 20px;
              border: 1px solid var(--color-border);
              flex-shrink: 0;
            }

            .icon {
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }
  }

  .page {
    padding: 0 24px;
    overflow-y: scroll;
  }

  @media screen and (max-width: 695px) {
    .page {
      padding: 0 12px;
    }
  }

  @media screen and (min-width: 1424px) and (max-width: 1727px) {
    .input-box {
      width: calc(-42.66667px + 33.33333vw);
    }
  }

  @media screen and (min-width: 1192px) and (max-width: 1423px) {
    .input-box {
      width: calc(-33.6px + 40vw);
    }
  }

  @media screen and (min-width: 960px) and (max-width: 1191px) {
    .input-box {
      width: calc(-36px + 50vw);
    }
  }

  @media screen and (min-width: 696px) and (max-width: 959px) {
    .input-box {
      width: calc(-40px + 66.66667vw);
    }
  }

  @media screen and (max-width: 695px) {
    .input-box {
      display: none;
    }
  }
</style>
